<template>
  <el-dialog
    title="显示设置"
    :visible.sync="dialog.isShow"
    width="650px"
    top="70px"
    :close-on-click-modal="false"
  >
    <div class="el-dialog-div" style="margin-top:10px;">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-table
          row-key="prop"
          class="tb-edit display-setting"
          :header-cell-style="{background:'#F5F4F7'}"
          border
          stripe
          style="width:100%;"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
          />
          <el-table-column prop="label" label="字段名">
            <template v-slot="scope">
              <el-input v-model="scope.row.label" />
            </template>
          </el-table-column>
          <el-table-column prop="align" label="对齐方式">
            <template v-slot="scope">
              <el-select v-model="scope.row.align">
                <el-option value="left" label="居左">居左</el-option>
                <el-option value="center" label="居中">居中</el-option>
                <el-option value="right" label="居右">居右</el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="show" label="是否显示" width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.show"
                active-color="#3FBEB8"
                inactive-color="#B7B7B7"
                active-value="1"
                inactive-value="0"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleUpdate">确 定</el-button>
      <el-button @click="dialog.isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Sortable from 'sortablejs'
import { listStyle, findListStyle } from '@/api/common/common'
import { mapGetters } from 'vuex'
export default {
  name: 'DisplaySetting',
  data() {
    return {
      tableData: [
      ],
      strKey: '',
      saveType: '',
      dialog: {
        isShow: false
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
  },
  mounted() {
  },
  methods: {
    show() {
      this.dialog.isShow = true
    },
    handleUpdate() {
      if (this.tableData.every(item => {
        return item.show === '0'
      })) {
        this.$message.error('至少显示一项')
        return false
      }
      this.tableData.forEach((val, idx) => {
        val.sort = idx + 1
      })
      listStyle({
        'strjson': JSON.stringify(this.tableData),
        'strkey': this.strKey + this.token.LNGOPERATORID
      }).then(res => {
        if (res.code === 20000) {
          this.$message.success('修改列头配置成功！')
          this.dialog.isShow = false
          this.$emit('refresh', this.tableData)
        }
      })
    },
    findListStyle() {
      findListStyle({ 'strkey': this.strKey + this.token.LNGOPERATORID }).then(res => {
        if (res.code === 20000) {
          this.tableData = JSON.parse(res.data.strjson).sort((a, b) => { return a.sort - b.sort })
          this.rowDrop()
        }
      })
    },
    rowDrop() {
      const tbody = document.querySelector('.display-setting .el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    }
  }
}
</script>
